<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id='app'>
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="100px">
            <el-form-item label="用户id" prop="oid" hidden>
                <el-input v-model="dataForm.oid" placeholder="用户id"></el-input>
            </el-form-item>
            <el-form-item label="用户id" prop="userId" hidden>
                <el-input v-model="dataForm.userId" placeholder="用户id"></el-input>
            </el-form-item>
            <el-form-item label="商品id" prop="goodsId" hidden>
                <el-input v-model="dataForm.goodsId" placeholder="商品id"></el-input>
            </el-form-item>
            <el-form-item label="活动id" prop="activityId" hidden>
                <el-input v-model="dataForm.activityId" placeholder="活动id"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsName" >
                {{dataForm.goodsName}}
                <!-- <el-input v-model="dataForm.goodsName" placeholder="商品名称" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="商品单价(元)" prop="goodsPrice">
                {{dataForm.goodsPrice}}
                <!-- <el-input v-model="dataForm.goodsPrice" placeholder="商品单价" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="商品数量(件)" prop="goodsCount">
                {{dataForm.goodsCount}}
                <!-- <el-input v-model="dataForm.goodsCount" placeholder="商品数量" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="登录系统" prop="goodsChannel">
                <span v-if="dataForm.goodsChannel==1">pc</span>
                <span v-if="dataForm.goodsChannel==2">android</span>
                <span v-if="dataForm.goodsChannel==3">ios</span>
                <!-- <el-input v-model="dataForm.goodsChannel" placeholder="1.pc 2.android 3.ios" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="订单状态：" prop="status">
                <span v-if="dataForm.status==0">未支付</span>
                <span v-if="dataForm.status==1">已支付</span>
                <span v-if="dataForm.status==2">已发货</span>
                <span v-if="dataForm.status==3">已收货</span>
                <span v-if="dataForm.status==4">已退款</span>
                <span v-if="dataForm.status==5">已完成</span>
                <!-- <el-input v-model="dataForm.status" disabled placeholder="订单状态：0新建未支付，1已支付，2已发货，3已收货，4已退款，5已完成"></el-input> -->
            </el-form-item>
            <el-form-item label="订单创建时间" prop="createDate">
                {{dataForm.createDate}}
                <!-- <el-input v-model="dataForm.createDate" placeholder="订单创建时间" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="收货地址" prop="deliveryAddrId">
                <el-input v-model="dataForm.deliveryAddrId" placeholder="收货地址"></el-input>
            </el-form-item>
            <el-form-item label="支付时间" prop="payDate" hidden>
                <el-input v-model="dataForm.payDate" placeholder="支付时间"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="payment()">去支付</el-button>
        </span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    dataUrl: "http://localhost:88/api",
                    dataForm: {
                        oid:0,
                        userId: localStorage.getItem("userId"),
                        goodsId: '',
                        activityId: localStorage.getItem("activityId"),
                        deliveryAddrId: '',
                        goodsName: '',
                        goodsCount: '',
                        goodsPrice: '',
                        goodsChannel: '',
                        status: 0,
                        createDate: '',
                        payDate: ''
                    },
                    dataRule: {
                        deliveryAddrId: [
                            { required: true, message: '收货地址id不能为空', trigger: 'blur' }
                        ],

                       
                    }
                }
            },
            //方法集合
            methods: {
                    init() {
                        this.$nextTick(() => {
                            this.$refs['dataForm'].resetFields()
                            
                                axios({
                                    url: `${this.dataUrl}/orders/order/info/${this.dataForm.userId}/${this.dataForm.activityId}`,
                                    method: 'get',
                                    // params: this.$http.adornParams()
                                }).then(({ data }) => {
                                    if (data && data.code === 0) {
                                        this.dataForm.oid = data.order.oid
                                        this.dataForm.userId = data.order.userId
                                        this.dataForm.goodsId = data.order.goodsId
                                        this.dataForm.activityId = data.order.activityId
                                        this.dataForm.deliveryAddrId = data.order.deliveryAddrId
                                        this.dataForm.goodsName = data.order.goodsName
                                        this.dataForm.goodsCount = data.order.goodsCount
                                        this.dataForm.goodsPrice = data.order.goodsPrice
                                        this.dataForm.goodsChannel = data.order.goodsChannel
                                        this.dataForm.status = data.order.status
                                        this.dataForm.createDate = data.order.createDate
                                        this.dataForm.payDate = data.order.payDate
                                    }
                                })
                            
                        })
                    },
                    payment(){
                        location=`http://localhost:7100/orders/order/payment?oid=${this.dataForm.oid}`
                    }
            },
            created() {
                this.init()
            },
        })
    </script>
</body>

</html>